.fortune-container {
  width: 7.5rem;
  height: 100vh;
  position: relative;

  .v-bg {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F14%2F20200414183159_psabr.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1724836101&t=00031d93664c60e6697c1dfdb4b600bb);
    background-size: 100% 100%;
  }
  .content{
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 3;
    padding-bottom: .2rem;
    .list-cell{
      width: 1.8rem;
      display: flex;
      flex-direction: column;
      position: relative;
      .list-radio{
        width: 100%;
        position: absolute;
        top: 1.8rem;
        left: 0;
      }
      img{
        width: 1.8rem;
        height: 2.4rem;
      }
      h3,p{
        font-size: .24rem;
        padding: 0;
        margin: 0;
        line-height: .45rem;
      }
    }
    .dateType{
      margin: 0 5%;
      display: flex;
      justify-content: space-between;
      margin-bottom: .2rem;
    }
    .fortune{
      margin: 0 5%;
      display: flex;
      flex-direction: column;
      border-radius: .1rem;
      background-image: linear-gradient(135deg, #33b8ff 0, #9d33ff 100%);
      box-sizing: border-box;
      .fortune-top{
        width: 100%;
        height: 1.3rem;
        display: flex;
        padding: 0 .2rem;
        box-sizing: border-box;
        align-items: center;
        img{
          width: .8rem;
          height: .8rem;
        }
        p{
          font-size: .32rem;
          color: #fff;
          margin-left: .2rem;
        }
      }
      .fortune-content{
        width: 100%;
        border-radius: .1rem;
        padding: .2rem .3rem;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        background-image: linear-gradient(135deg, #46b3ff 0, #a74fff 100%);
        .percentage{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: .4rem;
          .Progress-list{
            width: calc(100% - 100px);
            display: flex;
            flex-direction: column;
            .list{
              display: flex;
              align-items: center;
              span{
                color: #fff;
                margin-right: .1rem;
              }
              div{
                width: 3.6rem;
              }
            }
          }
        }
        .goodfortune{
          display: flex;
          justify-content: space-between;
          margin-bottom: .4rem;
          .cell-list{
            width: 33%;
            display: flex;
            flex-direction: column;
            align-items: center;
            p{
              margin: 0;
              padding: 0;
            }
            .text{
              font-size: .28rem;
              color: #fff;
            }
            .tips{
              color: #fff;
              opacity: .75;
            }
          }
        }
        .shortcomment{
          width: 100%;
          height:.5rem ;
          border-radius: .2rem;
          background: rgba(87, 105, 255, .45);
          text-align: center;
          span{
            color: #fff;
            font-size: .22rem;
            line-height: .5rem;
          }
        }
        .fortunetext{
          margin-top: .2rem;
          ul{
            margin: 0;
            padding: 0;
            li{
              list-style: none;
              color: #fff;
              margin-bottom: .1rem;
              font-size: .24rem;
              text-align: justify;
            }
          }
        }
      }
    }
  }
}
.adm-scroll-mask-left, .adm-scroll-mask-right{
  opacity: 0 !important;
}
.adm-capsule-tabs-tab-active{
  background-color: rgba(0, 0, 0, 0) !important;
}
.adm-capsule-tabs-tab {
  padding: 0 !important;
  background-color: rgba(0, 0, 0, 0) !important;
  color: #fff !important;
}
.adm-capsule-tabs-header{
  border: none !important;
}